<template>
    <div>
      <h1>用户登录</h1>
      <form @submit.prevent="login">
        <label for="username">用户名:</label>
        <input type="text" id="username" v-model="username" required>
        <br>
        <label for="password">密码:</label>
        <input type="password" id="password" v-model="password" required>
        <br>
        <button type="submit">登录</button>
      </form>
      <p v-if="message">{{ message }}</p>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import axios from 'axios';
  
  const username = ref('');
  const password = ref('');
  const message = ref('');
 const login = ()=>{
    axios({
    url:'/app/login',
    method:'post',
    data:{
        name:username.value,
        pwd:password.value
    }
  }).then(res=>{
       if(res.data.flag){
        message.value='登录成功'
       }
       else {
        message.value = '用户名或密码错误，请重试。';
      }
  })
  .catch(error=>{
    console.log(error)
  })
 }
  
  
//   const login = async () => {
//     try {
//         //https://your-api-url.com/login
//       const response = await axios.post('/app/login', {
//         username: username.value,
//         password: password.value
//       });
//       if (response.data.flag) {
//         message.value = '登录成功！';
//       } else {
//         message.value = '用户名或密码错误，请重试。';
//       }
//     } catch (error) {
//       console.error('登录请求出错:', error);
//       message.value = '登录请求出错，请稍后再试。';
//     }
//   };
  </script>
  
  <style scoped>
  form {
    display: flex;
    flex-direction: column;
    width: 300px;
  }
  
  input, button {
    margin: 5px 0;
    padding: 5px;
  }
  </style>    